<template>
  <div>
    <Header :left="true" leftText="返回" title="任务管理"> </Header>

    <van-tabs
      v-model="active"
      title-active-color="#144a9e"
      color="#144a9e"
      animated
      @click="onClick"
    >
      <van-tab v-for="index in itemsTwo" :title="index.plinename">
        <div class="buttonsgroup">
          <van-button
            size="small"
            color="#AF5BFF"
            type="warning"
            @click="checkAll"
            >全选</van-button
          >
          <van-button
            size="small"
            color="#23CAFF"
            style="margin-left: 10px"
            type="info"
            @click="toggleAll"
            >全不选</van-button
          >
        </div>
        <van-checkbox-group v-model="result">
          <van-cell-group border="true">
            <van-cell
              v-for="item in itemsThree"
              :icon="showicon(`${item.status}`)"
              clickable
              :key="item.machineid"
              :title="`${item.machinename}` + '(' + `${item.machineid}` + ')'"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox  checked-color="#138087" :name="item" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-tab>
    </van-tabs>
    <div class="buttongroupss">
      <van-button style="width: 40%" type="danger" @click="stopmachine()"
        >停机</van-button
      >
      <van-button
        style="margin-left: 10%; width: 40%"
        type="primary"
        @click="startmachine()"
        >开机</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Header from "@/components/header.vue";
import {
  Button,
  Checkbox,
  CheckboxGroup,
  Cell,
  CellGroup,
  Icon,
  Tab,
  Tabs,
  Toast,
} from "vant";
import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import { storage } from "@/libs/utils";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Button);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);

export default {
  name: "taskmanage",
  components: {
    Header,
  },
  data() {
    return {
      user: [], //登录用户信息
      result: [],
      itemsTwo: [],
      itemsThree: [],
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get("user"));

    let tkn = getToken();
    if (!tkn) {
      api.openWin({
        name: "login",
        url: "./login-login.html",
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    }
    //初始化产线明细
    this.queryplinelist();
    //加载第一条产线设备明细
    //this.queryequipment();
  },
  methods: {
    checkAll() {
      this.$refs.checkboxes[0].toggle(true);
      this.$refs.checkboxes[1].toggle(true);
      this.$refs.checkboxes[2].toggle(true);
      this.$refs.checkboxes[3].toggle(true);
      this.$refs.checkboxes[4].toggle(true);
      this.$refs.checkboxes[5].toggle(true);
      this.$refs.checkboxes[6].toggle(true);
      this.$refs.checkboxes[7].toggle(true);
      this.$refs.checkboxes[8].toggle(true);
      this.$refs.checkboxes[9].toggle(true);
      this.$refs.checkboxes[10].toggle(true);
      this.$refs.checkboxes[11].toggle(true);
      this.$refs.checkboxes[12].toggle(true);
      this.$refs.checkboxes[13].toggle(true);
      this.$refs.checkboxes[14].toggle(true);
      this.$refs.checkboxes[15].toggle(true);
      this.$refs.checkboxes[16].toggle(true);
      this.$refs.checkboxes[17].toggle(true);
      this.$refs.checkboxes[18].toggle(true);
      this.$refs.checkboxes[19].toggle(true);
      this.$refs.checkboxes[20].toggle(true);
      this.$refs.checkboxes[21].toggle(true);
      this.$refs.checkboxes[22].toggle(true);
      this.$refs.checkboxes[23].toggle(true);
      this.$refs.checkboxes[24].toggle(true);
      this.$refs.checkboxes[25].toggle(true);
      this.$refs.checkboxes[26].toggle(true);
      this.$refs.checkboxes[27].toggle(true);
      this.$refs.checkboxes[28].toggle(true);
      this.$refs.checkboxes[29].toggle(true);
      this.$refs.checkboxes[30].toggle(true);
      this.$refs.checkboxes[31].toggle(true);
      this.$refs.checkboxes[32].toggle(true);
      this.$refs.checkboxes[33].toggle(true);
      this.$refs.checkboxes[34].toggle(true);
      this.$refs.checkboxes[35].toggle(true);
      this.$refs.checkboxes[36].toggle(true);
      this.$refs.checkboxes[37].toggle(true);
      this.$refs.checkboxes[38].toggle(true);
      this.$refs.checkboxes[39].toggle(true);
      this.$refs.checkboxes[40].toggle(true);
      this.$refs.checkboxes[41].toggle(true);
      this.$refs.checkboxes[42].toggle(true);
      this.$refs.checkboxes[43].toggle(true);
      this.$refs.checkboxes[44].toggle(true);
      this.$refs.checkboxes[45].toggle(true);
      this.$refs.checkboxes[46].toggle(true);
      this.$refs.checkboxes[47].toggle(true);
      this.$refs.checkboxes[48].toggle(true);
      this.$refs.checkboxes[49].toggle(true);
      this.$refs.checkboxes[50].toggle(true);
      this.$refs.checkboxes[51].toggle(true);
      this.$refs.checkboxes[52].toggle(true);
      this.$refs.checkboxes[53].toggle(true);
      this.$refs.checkboxes[54].toggle(true);
      this.$refs.checkboxes[55].toggle(true);
      this.$refs.checkboxes[56].toggle(true);
      this.$refs.checkboxes[57].toggle(true);
      this.$refs.checkboxes[58].toggle(true);
      this.$refs.checkboxes[59].toggle(true);
      this.$refs.checkboxes[60].toggle(true);
      this.$refs.checkboxes[61].toggle(true);
      this.$refs.checkboxes[62].toggle(true);
      this.$refs.checkboxes[63].toggle(true);
      this.$refs.checkboxes[64].toggle(true);
      this.$refs.checkboxes[65].toggle(true);
      this.$refs.checkboxes[66].toggle(true);
      this.$refs.checkboxes[67].toggle(true);
      this.$refs.checkboxes[68].toggle(true);
      this.$refs.checkboxes[69].toggle(true);
      this.$refs.checkboxes[70].toggle(true);
      this.$refs.checkboxes[71].toggle(true);
      this.$refs.checkboxes[72].toggle(true);
      this.$refs.checkboxes[73].toggle(true);
      this.$refs.checkboxes[74].toggle(true);
      this.$refs.checkboxes[75].toggle(true);
      this.$refs.checkboxes[76].toggle(true);
      this.$refs.checkboxes[77].toggle(true);
      this.$refs.checkboxes[78].toggle(true);
      this.$refs.checkboxes[79].toggle(true);
      this.$refs.checkboxes[80].toggle(true);
      this.$refs.checkboxes[81].toggle(true);
      this.$refs.checkboxes[82].toggle(true);
      this.$refs.checkboxes[83].toggle(true);
      this.$refs.checkboxes[84].toggle(true);
      this.$refs.checkboxes[85].toggle(true);
      this.$refs.checkboxes[86].toggle(true);
      this.$refs.checkboxes[87].toggle(true);
      this.$refs.checkboxes[88].toggle(true);
      this.$refs.checkboxes[89].toggle(true);
      this.$refs.checkboxes[90].toggle(true);
      this.$refs.checkboxes[91].toggle(true);
      this.$refs.checkboxes[92].toggle(true);
      this.$refs.checkboxes[93].toggle(true);
      this.$refs.checkboxes[94].toggle(true);
      this.$refs.checkboxes[95].toggle(true);
      this.$refs.checkboxes[96].toggle(true);
      this.$refs.checkboxes[97].toggle(true);
      this.$refs.checkboxes[98].toggle(true);
      this.$refs.checkboxes[99].toggle(true);
      this.$refs.checkboxes[100].toggle(true);
    },
    toggleAll() {
      this.$refs.checkboxes[0].toggle(false);
      this.$refs.checkboxes[1].toggle(false);
      this.$refs.checkboxes[2].toggle(false);
      this.$refs.checkboxes[3].toggle(false);
      this.$refs.checkboxes[4].toggle(false);
      this.$refs.checkboxes[5].toggle(false);
      this.$refs.checkboxes[6].toggle(false);
      this.$refs.checkboxes[7].toggle(false);
      this.$refs.checkboxes[8].toggle(false);
      this.$refs.checkboxes[9].toggle(false);
      this.$refs.checkboxes[10].toggle(false);
      this.$refs.checkboxes[11].toggle(false);
      this.$refs.checkboxes[12].toggle(false);
      this.$refs.checkboxes[13].toggle(false);
      this.$refs.checkboxes[14].toggle(false);
      this.$refs.checkboxes[15].toggle(false);
      this.$refs.checkboxes[16].toggle(false);
      this.$refs.checkboxes[17].toggle(false);
      this.$refs.checkboxes[18].toggle(false);
      this.$refs.checkboxes[19].toggle(false);
      this.$refs.checkboxes[20].toggle(false);
      this.$refs.checkboxes[21].toggle(false);
      this.$refs.checkboxes[22].toggle(false);
      this.$refs.checkboxes[23].toggle(false);
      this.$refs.checkboxes[24].toggle(false);
      this.$refs.checkboxes[25].toggle(false);
      this.$refs.checkboxes[26].toggle(false);
      this.$refs.checkboxes[27].toggle(false);
      this.$refs.checkboxes[28].toggle(false);
      this.$refs.checkboxes[29].toggle(false);
      this.$refs.checkboxes[30].toggle(false);
      this.$refs.checkboxes[31].toggle(false);
      this.$refs.checkboxes[32].toggle(false);
      this.$refs.checkboxes[33].toggle(false);
      this.$refs.checkboxes[34].toggle(false);
      this.$refs.checkboxes[35].toggle(false);
      this.$refs.checkboxes[36].toggle(false);
      this.$refs.checkboxes[37].toggle(false);
      this.$refs.checkboxes[38].toggle(false);
      this.$refs.checkboxes[39].toggle(false);
      this.$refs.checkboxes[40].toggle(false);
      this.$refs.checkboxes[41].toggle(false);
      this.$refs.checkboxes[42].toggle(false);
      this.$refs.checkboxes[43].toggle(false);
      this.$refs.checkboxes[44].toggle(false);
      this.$refs.checkboxes[45].toggle(false);
      this.$refs.checkboxes[46].toggle(false);
      this.$refs.checkboxes[47].toggle(false);
      this.$refs.checkboxes[48].toggle(false);
      this.$refs.checkboxes[49].toggle(false);
      this.$refs.checkboxes[50].toggle(false);
      this.$refs.checkboxes[51].toggle(false);
      this.$refs.checkboxes[52].toggle(false);
      this.$refs.checkboxes[53].toggle(false);
      this.$refs.checkboxes[54].toggle(false);
      this.$refs.checkboxes[55].toggle(false);
      this.$refs.checkboxes[56].toggle(false);
      this.$refs.checkboxes[57].toggle(false);
      this.$refs.checkboxes[58].toggle(false);
      this.$refs.checkboxes[59].toggle(false);
      this.$refs.checkboxes[60].toggle(false);
      this.$refs.checkboxes[61].toggle(false);
      this.$refs.checkboxes[62].toggle(false);
      this.$refs.checkboxes[63].toggle(false);
      this.$refs.checkboxes[64].toggle(false);
      this.$refs.checkboxes[65].toggle(false);
      this.$refs.checkboxes[66].toggle(false);
      this.$refs.checkboxes[67].toggle(false);
      this.$refs.checkboxes[68].toggle(false);
      this.$refs.checkboxes[69].toggle(false);
      this.$refs.checkboxes[70].toggle(false);
      this.$refs.checkboxes[71].toggle(false);
      this.$refs.checkboxes[72].toggle(false);
      this.$refs.checkboxes[73].toggle(false);
      this.$refs.checkboxes[74].toggle(false);
      this.$refs.checkboxes[75].toggle(false);
      this.$refs.checkboxes[76].toggle(false);
      this.$refs.checkboxes[77].toggle(false);
      this.$refs.checkboxes[78].toggle(false);
      this.$refs.checkboxes[79].toggle(false);
      this.$refs.checkboxes[80].toggle(false);
      this.$refs.checkboxes[81].toggle(false);
      this.$refs.checkboxes[82].toggle(false);
      this.$refs.checkboxes[83].toggle(false);
      this.$refs.checkboxes[84].toggle(false);
      this.$refs.checkboxes[85].toggle(false);
      this.$refs.checkboxes[86].toggle(false);
      this.$refs.checkboxes[87].toggle(false);
      this.$refs.checkboxes[88].toggle(false);
      this.$refs.checkboxes[89].toggle(false);
      this.$refs.checkboxes[90].toggle(false);
      this.$refs.checkboxes[91].toggle(false);
      this.$refs.checkboxes[92].toggle(false);
      this.$refs.checkboxes[93].toggle(false);
      this.$refs.checkboxes[94].toggle(false);
      this.$refs.checkboxes[95].toggle(false);
      this.$refs.checkboxes[96].toggle(false);
      this.$refs.checkboxes[97].toggle(false);
      this.$refs.checkboxes[98].toggle(false);
      this.$refs.checkboxes[99].toggle(false);
      this.$refs.checkboxes[100].toggle(false);
    },
    async stopmachine() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "保存中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/threepiecesequipment/savenoenable",
          {
            body: {
              result: _this.result,
            },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          Toast("保存成功");
          setTimeout(function () {
            window.location.reload();
          }, 2 * 1000); //延迟5000毫秒
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    async startmachine() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "保存中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/threepiecesequipment/saveenable",
          {
            body: {
              result: _this.result,
            },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          Toast("保存成功");
          setTimeout(function () {
            window.location.reload();
          }, 2 * 1000); //延迟5000毫秒
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    showicon(status) {
      if (status == "1") {
        return "assets/greencircle.png";
      } else {
        return "assets/redcircle.png";
      }
    },
    async onClick(name, title) {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "查询中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/threepiecesequipment/infoname",
          {
            body: {
              deptid: _this.user.dept.deptId,
              plinename: title,
            },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          _this.itemsThree = res.rows;
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    async queryequipment() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "查询中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/threepiecesequipment/info",
          {
            body: {
              deptid: _this.user.dept.deptId,
              plineid: _this.itemsTwo[0].plineid,
            },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          _this.itemsThree = res.rows;
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    async queryplinelist() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "查询中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/threepiecesequipment/querypline",
          {
            body: {
              deptid: _this.user.dept.deptId,
            },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          _this.itemsTwo = res.rows;
          try {
            let res = await _httpClient.post(
              _httpClient.getApiPrefix() + "/app/threepiecesequipment/info",
              {
                body: {
                  deptid: _this.user.dept.deptId,
                  plineid: _this.itemsTwo[0].plineid,
                },
              }
            );

            if (res.code === 200) {
              Toast.clear();
              _this.itemsThree = res.rows;
            } else {
              Toast.fail(res.msg);
            }
          } catch (e) {
            Toast.fail(JSON.stringify(e));
          }
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
body {
  background-color: White;
}
.buttonsgroup {
  margin-top: 5px;
  margin-left: 60%;
}
.buttongroupss {
  margin-top: 80%;
  margin-bottom: 10px;
  margin-left: 15%;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 10%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}
</style>
